<script setup name="search">
import { useUserStore } from "@/store"
import { storeToRefs } from "pinia"
import { useSlots, ref } from "vue"

defineProps({ model: Object })

const slots = useSlots()
const userStore = useUserStore()
const hasShowSearch = ref(!!slots.show)
const { showSearch } = storeToRefs(userStore)
defineEmits(["search", "reset", "create"])
</script>
<template>
  <el-form :model="model" class="searchForm" size="small">
    <el-row :gutter="10">
      <slot />
      <template v-if="showSearch">
        <slot name="show" />
      </template>
      <el-col :sm="6" :span="10">
        <el-form-item class="but-form">
          <el-tooltip effect="light" content="搜索" placement="top">
            <el-button type="success" size="small" @click="$emit('search')">
              <el-icon>
                <Search />
              </el-icon>
            </el-button>
          </el-tooltip>

          <el-tooltip effect="light" content="重置" placement="top">
            <el-button type="info" size="small" @click="$emit('reset')">
              <el-icon>
                <RefreshRight />
              </el-icon>
            </el-button>
          </el-tooltip>

          <el-button v-if="hasShowSearch" type="primary" text size="small" @click="showSearch = !showSearch" style="width: 36px">
            {{ showSearch ? "收起" : "展开" }}
            <el-icon style="color: #ccc">
              <ArrowUp v-if="showSearch" />
              <ArrowDown v-else />
            </el-icon>
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.searchForm {
  padding: 0 10px;
  .el-row {
    align-items: center;
    .el-col:last-child {
      display: flex;
      justify-content: end;
      .el-button {
        margin: 0 2px;
      }
    }
  }
}
@media screen and (max-width: 375px), screen and (max-width: 414px) {
  :deep(.el-dialog--center) {
    min-width: 80% !important;
    max-width: 80% !important;
  }
}
</style>
